<script setup lang="ts">
import { ref, computed } from "vue";
import EditDropDown from "@/views/all/equip/components/EditDropDown.vue";
import LazyRender from "@/components/LazyRender/index.vue";
const props = defineProps<{
  data?: any;
  type?: string;
  config: {
    title: string;
    key: string;
    columns: {
      label: string;
      value: string;
      fixed?: boolean | string;
      align?: string;
      minWidth?: string;
      width?: string;
      children?: { label: string; value: string; align?: string; minWidth?: string; width?: string }[];
    }[];
  };
}>();
const pageSize = 900;
const pageNum = ref(1);
// 防止页面卡顿，对表格数据分页
const tableData = computed(() => {
  const startIndex = (pageNum.value - 1) * pageSize;
  const endIndex = pageNum.value * pageSize;
  return props.data?.slice(startIndex, endIndex);
});
const indexMethod = index => {
  return index + 1 + (pageNum.value - 1) * pageSize;
};
</script>
<template>
  <EditDropDown :dropdownTitle="config.title">
    <template v-slot:content>
      <!-- <LazyRender> -->
      <!-- <div> -->
      <px-table :max-height="type === 'print' ? 'auto' : '600px'" :data="tableData" class="point-table">
        <px-table-column fixed="left" label="序号" type="index" width="60" :index="indexMethod"> </px-table-column>
        <px-table-column
          v-for="(item, index) in config.columns"
          :key="index"
          :fixed="item.fixed"
          :align="item.align"
          :minWidth="item.minWidth"
          :width="item.width"
          :prop="item.value"
          :label="item.label"
          :fit="true"
          :show-overflow-tooltip="true"
        >
          <template #header>
            <div v-html="item.label" />
          </template>
          <template #default="scope">
            <template v-if="!item.children">
              <span>{{ scope.row[item.value] || "-" }}</span>
            </template>
            <template v-else>
              <px-table-column
                v-for="(child, ind) in item.children"
                :key="`child${ind}`"
                :align="child.align"
                :minWidth="child.minWidth"
                :width="child.width"
                :prop="child.value"
                :label="child.label"
                show-overflow-tooltip
              >
                <template #header>
                  <div v-html="child.label" />
                </template>
                <template #default="childScope">
                  <span>{{ childScope.row[child.value] || "-" }}</span>
                </template>
              </px-table-column>
            </template>
          </template>
        </px-table-column>
        <px-table-column props="advisedLocations" minWidth="160px" label="点位推荐" show-overflow-tooltip fixed="right">
          <template #default="scope">
            <span>{{ scope.row.advisedLocations || "-" }}</span>
          </template>
        </px-table-column></px-table
      >
      <div class="point-pagination-container">
        <px-pagination
          v-show="data?.length > pageSize"
          class="mt-[24px] pb-[16px]"
          v-model:current-page="pageNum"
          :page-size="pageSize"
          background
          layout="prev, pager, next"
          :total="data?.length || 0"
        />
      </div>
      <!-- </div> -->
      <!-- </LazyRender> -->
    </template>
  </EditDropDown>
</template>
<style lang="scss" scoped>
.point-pagination-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.point-table {
  --px-table-border-color: #dfdfdf;
  font-size: 14px;

  :deep(.px-table__header) {
    thead {
      tr {
        background-color: #e9f8f9 !important;

        th {
          font-size: 14px;
          font-weight: bold;
          color: #000;
          background-color: #e9f8f9 !important;
        }
      }
    }
  }
}
</style>
